<template>
    <div>
        <div>
            <a-tabs default-active-key="1">
                <a-tab-pane key="1">
                    <span slot="tab">上传明细</span>
                    <a-radio-group default-value="0" button-style="solid" @change="getResourceStatus">
                        <a-radio-button style="margin-right: 10px; width: 100px; text-align: center;" value="0">
                            全部
                        </a-radio-button>
                        <a-radio-button style="margin-right: 10px; width: 100px; text-align: center;" value="b">
                            待审核
                        </a-radio-button>
                        <a-radio-button style="margin-right: 10px; width: 100px; text-align: center;" value="c">
                            已通过
                        </a-radio-button>
                        <a-radio-button style="margin-right: 10px; width: 100px; text-align: center;" value="d">
                            未通过
                        </a-radio-button>
                        <a-radio-button style="margin-right: 10px; width: 100px; text-align: center;" value="e">
                            已私密
                        </a-radio-button>
                    </a-radio-group>
                    <div class="resource-detail" v-for="(blogFileResource, index) in blogFileResources" :key="index">
                        <div class="resource-icon">
                            <svg-icon :icon="iconName" size="45"/>
                        </div>
                        <div class="resource-detail-text">
                            <div class="resource-name">
                                {{ blogFileResource.resourceName }}
                            </div>
                            <div class="resource-description">
                                {{ blogFileResource.message }}
                            </div>
                            <div class="resource-tags">
                                <div class="resource-tags-tag">
                                    <a-tag v-for="(tag, index) in blogFileResource.tags" :key="index">{{tag.tagName}}</a-tag>
                                </div>
                                <div class="resource-status">
                                    <p v-if="blogFileResource.status == 1" style="color: green;">已通过</p>
                                    <p v-else-if="blogFileResource.status == 0" style="color: darkgray">正在审批</p>
                                </div>
                            </div>
                            <div class="resource-date-operating">
                                <div class="resource-date-integral">
                                    <span class="resource-date" style="margin-right: 10px; ">上传时间：{{blogFileResource.createTime}}</span>
                                    <span class="resource-integral">所需积分/C币：<span
                                            style="font-weight: bold; color: rgb(250, 172, 0);">{{blogFileResource.integral}}</span></span>
                                </div>
                                <div class="resource-operating">
                                    <span style="margin-right: 10px;"><a href="#">编辑</a></span> | <span style="margin:0 10px;"><a href="#">私密</a></span>
                                    | <span style="margin-left: 10px;"><a href="#">下载链接</a></span>
                                </div>
                            </div>

                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "upload-details",
        data() {
            return {
                resourceName: "elasticsearch-7.6.1-linux-x86_64.tar.gz",
                iconName: "iconziyuan",
                blogFileResources: [
                    {
                        id: 1,
                        fileUrl: "",
                        resourceName: "elasticsearch-7.6.1-linux-x86_64.tar.gz",
                        message: "elasticsearch，7xx的linux版本，由于去官网下载过慢，可以参考我的博客进行学习！！",
                        integral: 9,
                        createTime: "2020-05-25",
                        status: 1,
                        tags: [
                            {
                                id: 1,
                                tagName: "elasticsearch"
                            },
                            {
                                id: 2,
                                tagName: "linux"
                            }
                        ]
                    },
                    {
                        id: 2,
                        fileUrl: "",
                        resourceName: "redis-5.0.7-linux-x86_64.tar.gz",
                        message: "redis，5xx的linux版本，由于去官网下载过慢，可以参考我的博客进行学习！！",
                        integral: 5,
                        createTime: "2020-04-25",
                        status: 0,
                        tags: [
                            {
                                id: 1,
                                tagName: "redis"
                            },
                            {
                                id: 2,
                                tagName: "nosql"
                            },
                            {
                                id: 3,
                                tagName: "linux"
                            },
                            {
                                id: 4,
                                tagName: "存储"
                            },
                            {
                                id: 5,
                                tagName: "java"
                            }
                        ]
                    }
                ]

            }
        },
        methods: {
            /* 获取资源的状态值 */
            getResourceStatus(info) {
                console.log(info.target.value)
            }
        }
    }
</script>

<style scoped>
    .resource-detail {
        margin-top: 8px;
        padding-top: 10px;
    }

    .resource-icon {
        float: left;
        margin-right: 15px;
    }

    .resource-detail-text {
        float: left;
        width: 880px;
    }

    .resource-date-operating, .resource-tags {
        display: flex;
        justify-content: space-between;
    }

    .resource-name {
        font-weight: bold;
        font-size: 16px;
    }

    .resource-description{
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
